<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <intro-setup />

        <title-card title="引入intro.js"></title-card>
        <pre-code :code="npmCode" language="bash" />

        <title-card title="文档"></title-card>
        <p>
          &nbsp;&nbsp;
          <span>官方文档</span>
          &nbsp;&nbsp;
          <a
            href="https://introjs.com/docs"
            target="_blank"
            >https://introjs.com/docs</a
          >
        </p>

        <title-card title="初始化"></title-card>
        <pre-code :code="handleStart" language="JavaScript" />
      </template>
    </article-templates>
  </div>
</template>

<script setup name="SetUp">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import IntroSetup from './IntroSetup/index.vue'
import TitleCard from "@/components/TitleCard/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const npmCode = ref(`npm install intro.js --save

yarn add intro.js`);
const handleStart = ref(`import intro from 'intro.js';
import 'intro.js/minified/introjs.min.css';

const handleStart = () => {
  intro()
    .setOptions({
      prevLabel: '上一步',
      nextLabel: '下一步',
      skipLabel: '跳过',
      doneLabel: '完成',
      steps: [
        {
          title: 'Welcome',
          intro: 'Hello World! 👋',
        },
        {
          title: 'Collapse Button',
          element: document.querySelector('.setup-1'),
          intro: 'This is the menu collapse button.',
        },
        {
          title: 'User Action',
          element: document.querySelector('.setup-2'),
          intro: 'This is the user function area.',
        },
      ],
    })
    .oncomplete(() => {
      // 点击结束按钮后执行的事件
      console.log('oncomplete');
    })
    .onexit(() => {
      // 点击跳过按钮后执行的事件
      console.log('onexit');
    })
    // .onbeforeexit(() => {
    //   // 确认完毕之后执行的事件
    //   return confirm('Are you sure?')
    // })
    .start();
}`);

const getTitle = () => {
  postArticleDetail({
    route: 'SetUp',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>